<template>
	<view>
		<RichTextEditor v-model="WatchValue" api-key="ahlvx0yz0o51bdely8hsgtbwfcz5q23576jt4vnxo6yze3az" :init="{
				height: 500,
				plugins: [
				    'advlist autolink lists link image charmap print preview anchor code codesample',
				    'searchreplace visualblocks code fullscreen',
				    'insertdatetime media table paste imagetools wordcount'
				  ],
				toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |code codesample removeformat| link image media',
				language: 'zh_CN',				
				branding: false,
				draggable_modal: true,
				images_upload_handler:example_image_upload_handler,
				file_picker_callback: fileupload,
			}" />
	</view>
</template>




<!-- cankao
 http://tinymce.ax-z.cn/general/upload-images.php
 https://www.tiny.cloud/docs/demo/ 
 -->
<script>
	import Editor from '../tinymce/tinymce-vue'
	export default {
		props: {
			value: String
		},
		components: {
			'RichTextEditor': Editor
		},
		data() {
			return {
				WatchValue: this.value
			};
		},
		watch: {
			WatchValue(value) {
				this.$emit('change', value)
			}
		},
		methods: {
			example_image_upload_handler(blobInfo, success, failure, progress) {
				
				var file = blobInfo.blob(); //转化为易于理解的file对象
				let path = this.getObjectURL(file);
				if(file.size/(1024*1024)>2){
					//alert("图片不能大于2m")
					failure("图片不能大于2m")
					return;
				}
				let ext = file.name.split('.').pop()				
				let yunpath = Date.now() + '.' + ext;
				const options = {
					filePath: path,
					cloudPath: yunpath
				}
				uniCloud.uploadFile({
					...options,
					success(res) {						
						success(res.fileID);
					},
					fail(e) {failure(e)},
					complete() {}
				})




			},
			fileupload(callback, value, meta){
				var filetype='.jpg,.png,.gif,.jpeg,.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
				//后端接收上传文件的地址				
				//为不同插件指定文件类型及后端地址
				switch(meta.filetype){
				    case 'image':
				        filetype='.jpg, .jpeg, .png, .gif';				        
				        break;
				    case 'media':
				        filetype='.mp3, .mp4';				       
				        break;
				    case 'file':
				    default:
				}
				let that=this;
				var input = document.createElement('input');
				            input.setAttribute('type', 'file');
				            input.setAttribute('accept', filetype);
				        input.click();
				        input.onchange = function() {
				            var file = this.files[0];
							if(file.size/(1024*1024)>10){
								alert("文件不能大于10m")
								return;
							}
							let path = that.getObjectURL(file);
							let ext = file.name.split('.').pop()
							let yunpath = Date.now() + '.' + ext;
							const options = {
								filePath: path,
								cloudPath: yunpath
							}
							let objtxt={}
							if(meta.filetype=="image"){
								objtxt={"alt":file.name}
							}
							else if(meta.filetype=="media"){
								objtxt={source2: '', poster: ''}
							}
							else if(meta.filetype=="file"){
								objtxt={text: file.name}
							}
							
							
							uniCloud.uploadFile({
								...options,
								success(res) {				
									callback(res.fileID,objtxt);
								},
								fail(e) {alert('上传失败')},
								complete() {}
							})
							
				}
				// var file = meta.blob(); //转化为易于理解的file对象
				// let path = this.getObjectURL(file);
				// let ext = file.name.split('.').pop()				
				// let yunpath = Date.now() + '.' + ext;
				// const options = {
				// 	filePath: path,
				// 	cloudPath: yunpath
				// }
				// uniCloud.uploadFile({
				// 	...options,
				// 	success(res) {				
				// 		callback(res.fileID);
				// 	},
				// 	fail(e) {alert('error')},
				// 	complete() {}
				// })
				
			},
			getObjectURL(file) {
				var url = "";
				if (window.createObjectURL != undefined) {
					url = window.createObjectURL(file);
				} else if (window.URL != undefined) {
					url = window.URL.createObjectURL(file);
				} else if (window.webkitURL != undefined) {
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			}
		}
	}
</script>

<style>

</style>
